import React, { useState } from "react";
import { List } from "antd-mobile";
import "./index.scss";
import { useNavigate } from "react-router-dom";
import NavBarBox from "../../components/NavBar";
const Collection = () => {
  const list = JSON.parse(localStorage.getItem("collect")) || [];
  const navigate = useNavigate();
  return (
    <div>
      <NavBarBox title="我的收藏" />
      <List>
        {list.map((item, index) => {
          return (
            <List.Item
              key={index}
              onClick={() => navigate(`/detail/${item.id}`)}
            >
              <div className="listItem">
                <div className="imgBox">
                  <img src={item.coverImageUrl} alt="" />
                </div>
                <div className="right">
                  <h3>{item.name}</h3>
                  <p>{item.location}</p>
                  <p style={{ fontWeight: "bold", color: "black" }}>
                    ￥{item.price}
                  </p>
                </div>
              </div>
            </List.Item>
          );
        })}
      </List>
    </div>
  );
};

export default Collection;
